<template>
	<movable-area class="box">
		<uni-loading v-if="loading"></uni-loading>
		<view class="body" v-else>
			<uni-segmented-control :current="current" :values="items" style-type="text" active-color="#FF4E74"
				@clickItem="handleTabChange" />
			<uni-search-bar placeholder="请输入任务号" bgColor="#EEEEEE" @confirm="handleSearchComfig" />
			<swiper class="swiper" :class="type === 'create' ? 'swiper-s' : 'swiper-l'" :current="current"
				@change="handleTabChange" :disable-touch="true">
				<swiper-item v-for="(node, key, index) in tabMap">
					<!--  列表  -->
					<scroll-view scroll-y="true" class="scroll" :class="type === 'create' ? 'scroll-s' : 'scroll-l'"
						@scrolltolower="handleScrolltolower" refresher-enabled
						@refresherrefresh="handleRefresherrefresh" :refresher-triggered="refresherTriggered">
						<template v-if="node.taskList && node.taskList.length > 0">
							<uni-swipe-action>
								<uni-swipe-action-item :left-options="options" @click="handleDelete(item)"
									v-for="item in node.taskList">
									<view class="panel" @click="openDetail(item)">
										<view class="panel_title" :class="{error: item.error}">
											<view class="panel_title_left">{{ item.billNo }}</view>
											<view class="tag" v-if="item.prdCol" :class="{review: item.prdCol}">
												已完成
											</view>
											<view class="tag" v-else-if="item.status === 'save'">
												待审核
											</view>
											<view class="tag" v-else-if="item.status === 'audit'"
												:class="{save: item.status === 'audit'}">
												已审核
											</view>
										</view>
										<view class="panel_content">
											<view class="flex-list">
												<view class="flex-left">
													<view class="flex-title-row">
														<view class="flex-title">创建人</view><span>：</span>
													</view>
													<view class="flex-title-row">
														<view class="flex-title">创建时间</view><span>：</span>
													</view>
													<view class="flex-title-row">
														<view class="flex-title">开始时间</view><span>：</span>
													</view>
													<view class="flex-title-row">
														<view class="flex-title">结束时间</view><span>：</span>
													</view>
													<view class="flex-title-row">
														<view class="flex-title">生产车间</view><span>：</span>
													</view>
												</view>
												<view class="flex-right">
													<view class="flex-content">
														{{ item.createUserName }}
													</view>
													<view class="flex-content">
														<uni-dateformat :date="item.createTime"
															format="yyyy年MM月dd日 hh:mm:ss">
														</uni-dateformat>
													</view>
													<view class="flex-content">
														<uni-dateformat :date="item.startTime"
															format="yyyy年MM月dd日 hh:mm:ss">
														</uni-dateformat>
													</view>
													<view class="flex-content">
														<uni-dateformat :date="item.endTime"
															format="yyyy年MM月dd日 hh:mm:ss">
														</uni-dateformat>
													</view>
													<view class="flex-content">
														{{ item.produceHouseName }}
													</view>
												</view>
											</view>
											<view class="flex-list-btn" v-if="type === 'create'">
												<button  v-if="item.inStock" class= "flex-list-btn-item" 
													@click.stop="handleFinish(item)">
													完工
												</button>
												<view v-if="!item.prdCol && item.pick" class="flex-list-btn-item"
													@click.stop="handleComplete(item)">
													完成任务
												</view>
											</view>
										</view>
									</view>
								</uni-swipe-action-item>
								<!-- 加载 -->
								<uni-load-more
									:status="tabMap[current].pageConfig.bottomLoading ? 'loading' : tabMap[current].pageConfig.bottomEnd ? 'noMore' : 'more'">
								</uni-load-more>
							</uni-swipe-action>
						</template>
						<uni-empty-info v-else label="暂无任务信息"></uni-empty-info>
					</scroll-view>
				</swiper-item>
			</swiper>

			<!--  底部按钮  -->
			<view class="footerPanel" v-if="type === 'create'">
				<view class="footerPanel_body">
					<button @click="gotoAddTask()" class="footerBtn scan onlyBtn"><i
							class="iconfont icon-jiahao btn_icon"></i>新增任务
					</button>
				</view>
			</view>

			<!--  操作面板  -->
			<min-action-sheet ref="as"></min-action-sheet>

			<!-- 扫码 -->
			<movable-view class="page-scanning" :x="x" :y="y" direction="all" @change="onChange" @click="getTaskInfoScanning()" out-of-bounds="false">
				<i class="iconfont icon-saomiao page-scanning-icon"></i>
			</movable-view>
		<!-- 	<movable-area class="movable-area">
				<movable-view class="page-scanning" :x="x" :y="y" direction="all" @change="onChange" >
				
				</movable-view>
			</movable-area> -->
			

			<!-- 扫描任务码 -->
			<task-popup ref="taskPopupRef" @success="taskScanningScuess"></task-popup>
		</view>
	</movable-area>
</template>
<script>
	import uniLoading from "../../vBase/components/uni-loading/uni-loading"
	import uniEmptyInfo from "../../vBase/components/uni-empty-info/uni-empty-info"
	import minActionSheet from '../../components/min-action-sheet/min-action-sheet'
	import TaskPopup from '../../components/popup/task-popup.vue'
	import antiShake from "../../components/cascade-picker/clickThrottle.js"
	
	export default {
		name: "task",
		components: {
			uniLoading,
			uniEmptyInfo,
			minActionSheet,
			TaskPopup
		},
		data() {
			return {
				x:0,
				y:0,
				type: 'create',
				loading: true,
				taskList: [],
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#FF4E74'
					}
				}],
				items: ['半成品、产成品', '分选'],
				scaningShow: false,
				scanNo: null,
				isFouce: false,
				stockList: [],
				stockNo: '',
				outBoxNo: null,
				idList: null,
				debounce: false,
				current: 0,
				tabMap: {
					0: {
						type: 'product',
						taskList: [],
						pageConfig: {
							pageIndex: 0,
							pageSize: 20,
							bottomEnd: false,
							bottomLoading: true
						}
					},
					1: {
						type: 'sorting',
						taskList: [],
						pageConfig: {
							pageIndex: 0,
							pageSize: 20,
							bottomEnd: false,
							bottomLoading: true
						}
					},
				},
				refresherTriggered: false,
				_refresherTriggered: false,
				keyword: ""
			}
		},
		onLoad(e) {
			if (e.type) this.type = e.type
			// this.handleVibrate(2, 500)
			// this.handleMediaPlayer('success')
		},
		async onShow() {
			this.reset()
			this.getDataList()
		},
		mounted() {},
		methods: {
			 onChange(e) {
				this.x = e.detail.x
				this.y = e.detail.y
			},
			/**
			 * 重置页数
			 */
			reset() {
				this.tabMap[0].pageConfig.pageIndex = 0
				this.tabMap[1].pageConfig.pageIndex = 0
			},

			/**
			 * 查看详情
			 */
			async openDetail(e) {
				let param = {
					billNo: e.billNo,
					pda: true
				}
				if (this.type === "inStock") {
					param.inStock = true
				} else if (this.type === 'fill') {
					param.type = "supplement"
				} else if (this.type === "refund") {
					param.type = "return"
				}
				const res = await this.$api.getPrdTaskDetail(param)
				if (!res.res) return
				if (this.type === 'refund') {
					this.$navigateTo('/pages/production/taskRefund', {
						taskBillNo: e.billNo,
						materialBomBillNo: e.materialBomBillNo,
						produceHouse: e.produceHouseName,
					})
				} else if (this.type === 'reverse') {
					this.$navigateTo('/pages/production/taskReserve', {
						taskBillNo: e.billNo,
					})
				} else {
					this.$navigateTo('/pages/production/halfOrWhole', {
						billNo: e.billNo,
						type: this.type,
						taskType: this.tabMap[this.current].type
					})
				}
			},

			/**
			 * 完成任务
			 * @param {Object} e
			 */
			handleComplete(e) {
				this.$navigateTo('/pages/production/halfOrWhole', {
					billNo: e.billNo,
					type: 'edit',
					taskType: this.tabMap[this.current].type
				})
			},

			/**
			 * 完工
			 * @param {Object} e
			 */
			async handleFinish(e) {
				// console.log(e)
				// console.log(antiShake())
				if (antiShake()){//防止重复点击
					let self = this
					uni.showModal({
						title: "提示",
						content: "确认该任务已完工？",
						success(res) {
							if (res.confirm) {
								self.$api.prdTaskEnd({
									billNo: e.billNo
								}).then(res => {
									if (!res.res) return
									uni.showToast({
										title: "任务已完工",
										icon: "none"
									})
									self.handleRefresherrefresh()
								})
							}
						}
					})
				} else{
					uni.showToast({
						title: '不要重复点击',
						icon: 'none'
					})
					// console.log("不要重复点击")
				}
			},

			/** 获取数据 */
			async getDataList() {
				let api = ''
				if (this.type === "create" || this.type === "reverse") {
					api = 'getPrdTaskListPda'
				} else if (this.type === "get") {
					api = 'getPrdTaskListPick'
				} else if (this.type === "fill" || this.type === "refund" || this.type === "inStock") {
					api = 'getPrdTaskListSupplementReturn'
				}
				let res = await this.$api[api]({
					type: this.tabMap[this.current].type,
					pageSize: this.tabMap[this.current].pageConfig.pageSize,
					pageIndex: this.tabMap[this.current].pageConfig.pageIndex,
					billNo: this.keyword ?? null
				});
				if (!res.res) return;
				if (this.tabMap[this.current].pageConfig.pageIndex === 0) this.tabMap[this.current].taskList = []
				this.tabMap[this.current].taskList = this.tabMap[this.current].taskList.concat(res.data ?? []);
				if (res.data && this.tabMap[this.current].pageConfig.pageSize > res.data.length) {
					this.tabMap[this.current].pageConfig.bottomEnd = true;
				}
				this.tabMap[this.current].pageConfig.bottomLoading = false;
				this.loading = false;
				this.refresherTriggered =  false;
				this._refresherTriggered =  false;
			},

			/** 新增任务 */
			gotoAddTask() {
				this.$refs.as.handleShow({
					actions: [{
						name: '半成品、产成品',
					}, {
						name: '分选',
					}, ],
					success: (res) => {
						switch (res.id) {
							// -1代表取消按钮
							case -1:
								break
							case 0:
								this.$navigateTo('/pages/production/halfOrWhole?taskType=product')
								break
							case 1:
								this.$navigateTo('/pages/production/halfOrWhole?taskType=sorting')
								break
						}
					}
				})
			},

			/**
			 * 删除物料
			 * @param {Object} e
			 */
			handleDelete(material) {
				const self = this
				uni.showModal({
					title: '提示',
					content: '是否删除任务？',
					success(res) {
						if (res.confirm) {
							self.$api.deletePrdTaskBill({
								billNo: material.billNo
							}, {
								loading: true
							}).then(res => {
								if (res.res) {
									uni.showToast({
										title: '任务删除成功',
										icon: 'none'
									})
									self.getDataList();
								}
							})
						}
					}
				})
			},

			/**
			 * 下拉刷新数据
			 */
			handleRefresherrefresh() {
				if (this._refresherTriggered) {
					return;
				}
				//界面下拉触发，triggered可能不是true，要设为true
				if (!this.refresherTriggered) {
					this.refresherTriggered = true;
				}
				this.reset()
				this._refresherTriggered = true
				this.getDataList()
			},

			/** 上滑加载 */
			handleScrolltolower() {
				if (this.tabMap[this.current].pageConfig.bottomEnd) return
				this.tabMap[this.current].pageConfig.pageIndex++
				this.getDataList()
			},

			/** 切换tab */
			async handleTabChange(e) {
				if (this.debounce) return
				this.debounce = true
				this.current = e.hasOwnProperty('currentIndex') ? e.currentIndex : e.detail.current
				if (this.tabMap[this.current].taskList.length === 0) await this.getDataList()
				this.debounce = false
			},
			
			/**
			 * 检索回车
			 * @param {Object} e
			 */
			handleSearchComfig(e) {
				this.keyword = e.value
				this.reset()
				this.getDataList()
			},

			/**
			 * 扫码
			 */
			getTaskInfoScanning() {
				this.$refs.taskPopupRef.open()
			},

			/**
			 * 扫码成功
			 * @param {Object} e
			 */
			async taskScanningScuess(e) {
				let params = {
					billNo: e,
				}
				if (this.type === 'refund') {
					let res = await this.$api.getPrdTaskBillNumberReturn({
						billNo: e
					})
					Object.assign(params, {
						materialBomBillNo: res.materialBomBillNo,
						produceHouseName: res.produceHouse,
					})
				}
				this.openDetail(params)
			},
		}
	}
</script>
<style lang="scss" scoped>
	@import "../../static/css/common";
	
	.box{
		width: 99vw;
		height: 99vh;
	}
	.body {
		/* #ifndef  H5  */
		height: 100%;
		/*  #endif  */
		/*  #ifdef  H5  */
		height: calc(100vh - 44px);
		/*  #endif  */
		
	}

	.swiper-s {
		/* #ifndef  H5  */
		height: calc(100vh - 161px) !important;
		/* #endif */

		/*  #ifdef  H5  */
		height: calc(100vh - 205px) !important;
		/* #endif */

		::v-deep .uni-swiper-wrapper {
			/* #ifndef  H5  */
			height: calc(100vh - 161px) !important;
			/* #endif */

			/*  #ifdef  H5  */
			height: calc(100vh - 205px) !important;
			/* #endif */
		}
	}

	.swiper-l {
		/* #ifndef  H5  */
		height: calc(100vh - 105px) !important;
		/* #endif */

		/*  #ifdef  H5  */
		height: calc(100vh - 146px) !important;
		/* #endif */

		::v-deep .uni-swiper-wrapper {
			/* #ifndef  H5  */
			height: calc(100vh - 105px) !important;
			/* #endif */

			/*  #ifdef  H5  */
			height: calc(100vh - 146px) !important;
			/* #endif */
		}
	}

	.scroll-l {
		/* #ifndef  H5  */
		height: calc(100vh - 105px) !important;
		/* #endif */
		
		/*  #ifdef  H5  */
		height: calc(100vh - 146px) !important;
		/* #endif */
	}

	.scroll-s {
		/* #ifndef  H5  */
		height: calc(100vh - 161px) !important;
		/* #endif */
	
		/*  #ifdef  H5  */
		height: calc(100vh - 205px) !important;
		/* #endif */
	}

	.segmented-control {
		height: 45px;
	}

	.error {
		color: red;
	}
	// .movable-area{
		// width: 100vw;
		// height: 90vh;
		// background-color: transparent;
		// top: 0px;
		// position: fixed;
	.page-scanning{
		// width: 70px;
		// // height: 70px;
		// overflow: hidden;
		// border-radius: 35px;
		// background-color: $primary;
		// box-shadow: 2px 2px 8px 5px #ebebeb;
		// position: fixed;
		// right: 20px;
		// bottom: 70px;
		// // display: flex;
		// align-items: center;
		// justify-content: center;
		
		// }
	}
	
</style>
